<template>
    <div class="my-audio-box">
        <div class="playbtn" @click.stop="audioPlay">
            <van-loading v-if="loading" />
            <template v-else>
                <i v-if="playIng" class="iconfont icon-pause-full"></i>
                <i v-else class="iconfont icon-bofang"></i>
            </template>
        </div>
        <div class="time" v-if="totalTime">{{currentTime}}/{{totalTime}}</div>
        <audio id="audioEle" ref="audioEle" controls style="display:none">
            <source type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        </audio>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,onBeforeUnmount} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { Loading as vanLoading } from 'vant';

export default {
    components:{
       vanLoading
    },
    props:{
        arrSrc:Array,
        poster:String
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            playIng:false,
            totalTime:0, // 音频总时长
            currentTime:0,  // 当前已经播放的时长
            ele:'',
            st:'',
            loading:false
        })

        onMounted(()=>{
            state.ele = proxy.$refs.audioEle
            state.ele.src = props.arrSrc[0]  // 加载音频文件(只加载第一个)
            state.ele.addEventListener('ended',()=>{
                //alert('播放完成')
                state.playIng = false
            },false)
        })
        onBeforeUnmount(()=>{
            clearTimeout(state.st)
        })

        const audioPlay = ()=>{
            //const ele = proxy.$refs.audioEle
            console.log("播放总时长：",state.ele.duration) // 单位为秒
            const m = parseInt(state.ele.duration/60) // 分
            const s = parseInt(state.ele.duration%60) // 秒
            
            state.totalTime = `${m}:${s>9?s:'0'+s}`
            if(state.playIng){ // 播放中,则暂停
                clearTimeout(state.st)
                state.ele.pause()
                state.playIng = false
            }else{
                state.loading = true
                state.ele.play()
                state.playIng = true
                getCurrentTime()
            } 
        }
        const getCurrentTime = ()=>{ // 当前播放的进度（已经播放的时间）
            clearTimeout(state.st)
            if(state.ele.currentTime>0){
                state.loading = false
            }
            const m = parseInt(state.ele.currentTime/60) // 分
            const s = parseInt(state.ele.currentTime%60) // 秒
            state.currentTime = `${m}:${s>9?s:'0'+s}`
            state.st = setTimeout(()=>{
                getCurrentTime()
            },1000)
        }

        return{
            ...toRefs(state),
            audioPlay
        }
    }
}
</script>

<style lang="scss" scoped>
   .my-audio-box{  
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        //background: #306AAB;
        .playbtn{
            display: flex;
            width: 80px;
            height: 80px;
            background: rgba(0,0,0,0.5000);
            border-radius:50% ;
            align-items: center;
            justify-content: center;
            i{
                font-size: 30px;
            }
        }
        .time{
            text-align: center;
        }
   } 
</style>